<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/detail.css" />
		<link rel="stylesheet" type="text/css" href="../font_2191682_m6maym37tjk/font_2191682_778z6zvvyi8/iconfont.css" />
	</head>
	<body>
		<header></header>
		<section>
			<div id="slide">
				<div id="topB">
					<div id="slide-top">
						<a href="">
							<img src="../img/reslog.svg">
						</a>
					</div>
					<div id="slide-mid">
						<a href=""><img src="../reslog2.PNG"></a>
					</div>
				</div>
				<div id="slide-bottom">
					<span class="iconfont icon-kefu"></span>
					<span class="iconfont icon-fenxiangdaoliaotian"></span>
					<span class="iconfont icon-search"></span>
				</div>
			</div>
			<div id="detail">
				<div id="detail-A">
					<div id="detail-con">
						<div id="detail-con-header">
							<h1 class="text">
								<p class="detail-name">REVERSO ONE 翻转系列腕表</p>
								<p class="detail-material">精钢 - 石英</p>
							</h1>
							<p class="detail-EN">REF. <span>3288560</span></p>
						</div>
						<div id="banner">
							<div id="enlarge">
								<div class="middle-img">
								    <!-- 放大镜 -->
								    <div class="small_box">
								        <div class="mask"></div>
								    </div>
								
								    <div class="big_box"></div>
								</div>
							</div>
							<div id="word">
								<div id="word-actions">
									<p id="price">
										<span id="amount" style="font-size: 20px;">￥45,000</span><br>
										<span id="vat">含增值税</span>
									</p>
									<button class="AddToCart">添加至购物袋</button>
									<p id="info">
										<span id="shipping">免费配送，税费将在购买时进行计算</span>
									</p>
									<div id="tubiao">
										<ul>
											<li class="li1"></li>
											<li class="li2"></li>
											<li class="li3"></li>
											<li class="li4"></li>
										</ul>
									</div>
									<dl id="accordionGroup">
										<dt class="heading">
											<h2 class="Accordion-trigger">
												<span class="Accordion-title">-&nbsp;&nbsp;描述</span><br><br>
												<span class="Accordion-icon"></span>
											</h2>
										</dt>
										<dd class="Accordion-panel">
											<div class="Accordion-paragraph">
												<span class="description">惊艳醒目的勃艮第红色外观，让人一见倾心。这一优雅而经典的配色，缔造出充满个性的时尚之作。以上是人们对新款女士 Reverso One
													翻转腕表的第一印象。这一新款力作的灵感源自 20 世纪 30 年代的第一批长方形表款，它用柔美与大胆演绎 Reverso One
													翻转系列，魅力难挡。矩形表壳、经典装饰刻纹、优雅的阿拉伯数字时标、太子妃式指针以及漆面表盘周围点缀以两排明亮式切割钻石——以 Jaeger-LeCoultre 积家代表性装饰艺术风格重新演绎了经典表款的美学元素。</span>
											</div>
										</dd>
										<dt class="heading">
											<h2 class="Accordion-trigger">
												<span class="Accordion-title">+&nbsp;&nbsp;技术特性</span>
											
											</h2>
										</dt>
										<dt class="heading">
											<h2 class="Accordion-trigger">
												<span class="Accordion-title">+&nbsp;&nbsp;热情张扬的色彩</span>
											
											</h2>
										</dt>
					
										<dt class="heading">
											<h2 class="Accordion-trigger">
												<span class="Accordion-title">+&nbsp;&nbsp;您的专属天地</span>
												
											</h2>
										</dt>
										<dt class="heading">
											<h2 class="Accordion-trigger">
												<span class="Accordion-title">+&nbsp;&nbsp;最长可达 8 年的国际保修</span>
												
											</h2>
										</dt>
									</dl>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</section>
		<footer></footer>

	</body>
</html>
<script src="../js/jQuery.js"></script>
<script src="../js/detail.js"></script>
<script>
	$("header").load("header.html")
	$("footer").load("footer.html")
	//
	//获取放大镜元素
	let oMiddle = document.querySelector(".middle-img");
	let oSmallBox = document.querySelector(".small_box");
	let oBigBox = document.querySelector(".big_box");
	let oMask = document.querySelector(".mask");
	let m = new FangDaJing(oSmallBox, oBigBox, oMask);
	m.onmouseover();
	m.onmouseout();
	m.onmousemove();
	
	//
	//列表信息
	let url=window.location.href;
	function parseQueryString(url) {
		let str = url.split("?")[1], items = str.split("&");	
		let result = {};
		let arr;
		for (let i = 0; i < items.length; i++) {
			arr = items[i].split("=");		
			result[arr[0]] = arr[1];
		}
		return result;
	}
	let obj = parseQueryString(url);
	console.log(obj.id);
	$.getJSON("../json/shop.json", function(json){
	    let flag; //用来寻找上一个页面携带id是哪一条json语句
	    for(let index1 in json){
	        for(let index2 in json[index1]){
	            if(json[index1][index2]==obj.id){
	                flag=index1;
	            }
	        }
	    }
	    for(let index1 in json){
	        for(let index2 in json[index1]){
	            if(index1==flag){
	                console.log(index2);
	                if(index2=="img"){
	                    $(".small_box").css({
	                        backgroundImage:"url("+json[index1][index2]+")",
	                    })
	                   $(".big_box").css({
	                       backgroundImage:"url("+json[index1][index2]+")",
	                   })  
	                }
	                if(index2=="price"){
	                    console.log(json[index1][index2]);
	                    $("#price #amount").html("￥"+json[index1][index2]);
	                }
					if(index2=="info"){
						$("#detail-con-header .detail-name").html(json[index1][index2]);
					}
	            }
	        }
	    }
	});
	
	//添加购物车
	$(".AddToCart").click(function(){
		window.open("Cart.html?id="+obj.id);
	})
</script>